<template>
    <div class="authority_box">
        <div class="authority_top">所拥有的权限：</div>
        <div class="authority_content">
            <el-tree
            class="filter-tree"
            :data="authoritytreeData"
            :props="defaultProps1"
            :default-expand-all="isExpand1"
            :inline="true"
            :expand-on-click-node="false"
            :check-on-click-node="false"
            :show-checkbox="true"
            ref="authoritytreeData"
            node-key="key"
            :current-node-key="authoritytreeNodeSelected"
            @node-click="authoritytreeDataClick"
            :default-checked-keys="authoritySelectedover_1"
            @check="authoritycheckboxCheck"
            >
            </el-tree> 
        </div>
        <div class="authority_footer">
             <el-dropdown @command="treeStatus">
                <el-button>树操作 <i class="el-icon-arrow-up"></i></el-button>
                <el-dropdown-menu slot="dropdown" style="width=100px">
                    <el-dropdown-item command="7">全部勾选</el-dropdown-item>
                    <el-dropdown-item command="8">取消全选</el-dropdown-item>
                    <el-dropdown-item command="9">展开所有</el-dropdown-item>
                    <el-dropdown-item command="10">合并所有</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
            <div class="authority_button">
                <el-button size="medium" type="primary" icon="el-icon-thumb" @click="authoritytreeSelectedAll()"> 保存</el-button>
            </div>
            
        </div>
        
    </div>
</template>
<script>
export default{
    name:"departlistauthority",
    watch:{
        // 监视当前选中节点
            authoritytreeNodeSelected(key){
                if (key.toString()) {
                    this.$refs["authoritytreeData"].setCurrentKey(key);
                } else {
                    this.$refs["authoritytreeData"].setCurrentKey(null);
                }
            },
    },
    data(){
        return{
            authorityHalfSelect:[],// 半选框数组
            authoritySelectedover_1: this.authoritySelectedover,
            isExpand:true,
            // mountcheck:false,// 初次加载渲染复选框只做一次
            handle: [
                {
                id: '1',
                label: '全部勾选'
                }, 
                {
                id: '2',
                label: '取消全选'
                }, 
                {
                id: '3',
                label: '展开所有'
                }, 
                {
                id: '4',
                label: '合并所有'
                }
            ],  // 树操作的库
            handleSelected:"",
            authoritytreeNodeSelected:"",// 目前被点击的节点
            defaultProps1: {
                children: 'children',
                label: 'slotTitle'
            },
            authoritySelectedHandle:[],// 被处理过后的初始复选框状态数组
        }
    },
    methods:{
        // 保存权限
        authoritytreeSelectedAll(){
            let _self = this;
            _self.authoritySelectedover_1 = this.$refs.authoritytreeData.getCheckedKeys();
            _self.authorityHalfSelect = this.$refs.authoritytreeData.getHalfCheckedKeys();
            let selectedObj = this.authoritySelectedover_1.concat(this.authorityHalfSelect);
            _self.$emit('authoritySbumit',selectedObj);
        },
        treeStatusSon(){
            this.$nextTick(()=>{
                this.$refs.authoritytreeData.setCheckedNodes(this.authoritySelectedover);
            })
        },
        treeStatusSonKeys(){
            this.$nextTick(()=>{
                this.$refs.authoritytreeData.setCheckedKeys(this.authoritySelectedover);
            })
        },
        //遍历树的所有子节点，展开的时候给子节点展开状态赋值true，折叠时候赋值false
        buildData(){
            for(let i=0;i<this.$refs.authoritytreeData.store._getAllNodes().length;i++){
                this.$refs.authoritytreeData.store._getAllNodes()[i].expanded=this.isExpand1;
            }
        },
        // 点击单个复选框的内容
        authoritycheckboxCheck(a,b,c,d){
            console.log(a);
        },
        // 点击权限列表的节点文本
        authoritytreeDataClick(data1,data2,data3){
            console.log(data1);
            console.log(this.parentId);
            this.$emit("openDrawer" , true,data1.key);
        },

    },
    props:{
        parentId:{
            type:String,
            default:()=>{
                return ""
            }
        },
        isExpand1:{
            type:Boolean,
            default:()=>{
                return true;
            }
        },
        authoritytreeData:{
            type:Array,
            default:()=>{
                return [];
            }
        },
        authoritySelectedover:{
            type:Array,
            default:()=>{
                return [];
            }
        },
        treeStatus:{
            type:Function,
            default:null
        }

    }
}

</script>
<style lang="less" scoped>
.authority_box{
    height: 690px;
    
    padding: 30px 0 15px 30px;
    .authority_top{
        margin-bottom: 10px;
    }
    .authority_content{
        overflow: scroll;
        height: 550px;
        overflow-x: hidden;
        margin-bottom: 25px;
    }
    .authority_footer{
        margin-right: 30px;
        .authority_button{
            float: right;
        }
    }
    
}
</style>
